<script setup lang="ts">
import { useInfiniteQuery } from '@&#8203;pinia/colada'
import { onWatcherCleanup, useTemplateRef, watch } from 'vue'

const {
  state: factsPages,
  loadNextPage,
  asyncStatus,
  isDelaying,
  hasNextPage,
} = useInfiniteQuery({
  key: ['feed'],
  query: async ({ pageParam }) => factsApi.get<CatFacts>({ query: { page: pageParam, limit: 10 } }),
  initialPageParam: 1,
  getNextPageParam(lastPage) {
    return lastPage.next_page_url
  }
  // plugins
  retry: 0,
  delay: 0,
})

// we only need an array
const facts = computed(() => factPages.value.data?.pages.flat())
const loadMoreEl = useTemplateRef('load-more')

watch(loadMoreEl, (el) => {
  if (el) {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting) {
          loadNextPage()
        }
      },
      {
        rootMargin: '300px',
        threshold: [0],
      },
    )
    observer.observe(el)
    onWatcherCleanup(() => {
      observer.disconnect()
    })
  }
})
</script>

<template>
  <div>
    <button :disabled="asyncStatus === 'loading' || isDelaying" @&#8203;click="loadMore()">
      Load more (or scroll down)
    </button>
    <template v-if="facts?.length">
      <p>We have loaded {{ facts.length }} facts</p>
      <details>
        <summary>Show raw</summary>
        <pre>{{ facts }}</pre>
      </details>

      <blockquote v-for="fact in facts">
        {{ fact }}
      </blockquote>

      <p v-if="hasNextPage" ref="load-more">Loading more...</p>
    </template>
  </div>
</template>